<template>
	<view class="content">
		<view class="share-image">
			<image class="share-bg" :src="share_bg" mode="widthFix"></image>
			<view class="share-info">
				<view class="share-code">
					<text>您的邀请码是：{{myInfo.lid}}</text>
				</view>
				<view class="btn-wrap">
					<button type="primary" @click="openShare">立即邀请</button>
				</view>
			</view>
		</view>
		<view v-if="list.length > 0" class="invitation-wrap">
			<view class="invitation-title">我邀请的人:</view>
			<view class="invitation-list">
				<view class="invitation-item" v-for="(item, index) in list" :key="item.id" @click="openUserHome(item)">
					<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<view class="name-wrap">
							<text class="name">{{item.name}}</text>
							<view :class="['sex-wrap', 'sex' + item.sex]">
								<image class="sex-icon" :src="'/static/img/sex' + item.sex + '.png'" mode=""></image>
								<text class="age">{{item.age}}</text>
							</view>
						</view>
						<view class="city">{{item.city}}</view>
					</view>
					<view class="uni-icon uni-icon-arrowright"></view>
				</view>
			</view>
		</view>
		<share-popup ref="share" :shareData="shareData" @change="shareChange"></share-popup>
	</view>
</template>

<script>
	import sharePopup from '@/components/share-popup/share-popup.vue'
	export default {
		components: {
			sharePopup
		},
		data() {
			return {
				myInfo: {
					lid: ''
				},
				info: {},
				list: [],
				shareData: {
					share_title: '',
					share_desc: '',
					share_link: '',
					share_icon: '',
				},
				share_bg: ''
			}
		},
		onLoad(options) {
			this.share_bg = decodeURIComponent(options.bg)
			try {
				const myInfo = uni.getStorageSync('myInfo');
				if (myInfo) {
					this.myInfo = myInfo
				}
			} catch (e) {
				console.log(e)
			}
		},
		onReady() {
			this.getUserInvitationList();
			this.getLoveShare();
		},
		methods: {
			getUserInvitationList: function () {
				uni.showLoading({
					title: ''
				});
				this.$api.api.ajaxData({
					method: 'V1.UserInvitationList',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					page: 1
				}, res => {
					uni.hideLoading();
					if (res.status) {
						this.info = res.data.info
						this.list = res.data.list
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				}, err => {
					uni.hideLoading();
					uni.showToast({
						title: '网络错误，请稍后再试',
						position: 'bottom',
						icon: 'none'
					});
				})
			},
			
			openUserHome: function (item) {
				let user = {
					id: item.id,
					name: item.name,
					avatar:item.avatar
				}
				uni.navigateTo({
					url: '../home/user_home?user=' + JSON.stringify(user)
				})
			},
			
			getLoveShare: function () {
				this.$api.api.ajaxData({
					method: 'V1.LoveShare',
					uid: this.myInfo.id,
					token: this.myInfo.token,
					rid: '0'
				}, res => {
					if (res.status) {
						this.shareData.share_title = res.data.title
						this.shareData.share_desc = res.data.description
						this.shareData.share_link = res.data.domain + '?id=' + this.myInfo.lid
						this.shareData.share_icon = res.data.icon
					} else {
						uni.showToast({
							title: res.msg,
							position: 'bottom',
							icon: 'none'
						});
					}
				})
			},
			
			openShare: function () {
				this.$refs['share'].open();
			},
			
			shareChange: function (e) {
				console.log(e)
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../../common/common.scss';
	page {
		background-color: #fff7f8;
	}
	.share-image {
		display: flex;
		position: relative;
		.share-bg {
			width: 100%;
		}
		.share-info {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			.share-code {
				text {
					font-size: 36rpx;
					color: $main-color;
				}
			}
			.btn-wrap {
				width: 60%;
				padding: 50rpx 0;
				margin-bottom: 20%;
				button {
					border-radius: 100rpx;
				}
			}
		}
	}
	.invitation-wrap {
		padding-bottom: 50rpx;
		.invitation-title {
			font-size: 36rpx;
			color: $main-color;
			padding: 10px 50rpx;
		}
		.invitation-list {
			margin: 0 40rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}
		.invitation-item {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			& + .invitation-item {
				border-top: 1rpx solid $border-light-color;
			}
			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 80rpx;
			}
			.user-info {
				flex: 1;
				margin: 0 10rpx;
				.name-wrap {
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.name {
					font-size: 28rpx;
					color: $title-color;
					margin-right: 10rpx;
				}
				.sex-wrap {
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 28rpx;
					padding: 5rpx 10rpx;
					border-radius: 28rpx;
					&.sex1 {
						background: #83d7ff;
					}
					&.sex2 {
						background: #fe9ab7;
					}
					.sex-icon {
						width: 28rpx;
						height: 28rpx;
					}
					.age {
						font-size: 28rpx;
						color: #fff;
						margin-left: 5rpx;
					}
				}
				.city {
					font-size: 28rpx;
					color: $text-color;
				}
			}
			.uni-icon {
				font-size: 30rpx;
				color: $text-color;
			}
		}
	}
</style>
